﻿<!doctype html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<div th:replace="home/module/_header"></div>
<script src="/static/plugins/tinymce/tinymce.min.js"></script>

<main>
    <div class="reviews_summary">
        <div class="wrapper">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6">
                        <figure>
                            <img th:src="${item.photo}" alt="">
                        </figure>
                        <!--                            <small>菜品信息</small>-->
                        <h1>[[${item.name}]]</h1>
                        <p style="margin-bottom: 10px">
                            <span style="color: #e04040; font-weight: bold;display: block;">价格：[[${item.price}]]元</span>
                        </p>
                        <p>


                                <span class="rating">
                                        <i class="icon_star" th:if="${item.score >= 1 && item.score < 2}"
                                           th:each="i: ${#numbers.sequence(1, 1)}"></i>
                                        <i class="icon_star" th:if="${item.score >= 2 && item.score < 3}"
                                           th:each="i: ${#numbers.sequence(1, 2)}"></i>
                                        <i class="icon_star" th:if="${item.score >= 3 && item.score < 4}"
                                           th:each="i: ${#numbers.sequence(1, 3)}"></i>
                                        <i class="icon_star" th:if="${item.score >= 4 && item.score < 5}"
                                           th:each="i: ${#numbers.sequence(1, 4)}"></i>
                                        <i class="icon_star" th:if="${item.score == 5}"
                                           th:each="i: ${#numbers.sequence(1, 5)}"></i>

                                        <i class="icon_star empty" th:if="${item.score == 0}"
                                           th:each="i: ${#numbers.sequence(1, 5)}"></i>
                                        <i class="icon_star empty" th:if="${item.score >= 1 && item.score < 2}"
                                           th:each="i: ${#numbers.sequence(1, 4)}"></i>
                                        <i class="icon_star empty" th:if="${item.score >= 2 && item.score < 3}"
                                           th:each="i: ${#numbers.sequence(1, 3)}"></i>
                                        <i class="icon_star empty" th:if="${item.score >= 3 && item.score < 4}"
                                           th:each="i: ${#numbers.sequence(1, 2)}"></i>
                                        <i class="icon_star empty" th:if="${item.score >= 4 && item.score < 5}"
                                           th:each="i: ${#numbers.sequence(1, 1)}"></i>
                                        <em>菜品评分 [[${item.score}]]分</em>
                                </span>
                        </p>
                    </div>
                    <div class="col-lg-6 review_detail">
                        <div class="row">
                            <div class="col-6" style="margin-bottom: 10px;">
                                <p th:if="${!hasMark}">
                                    <button class="btn btn-primary btn-xs" th:onclick="'saveDishMark('+${item.id}+')'">
                                        收藏
                                    </button>
                                </p>
                                <p th:if="${hasMark}">
                                    <button class="btn btn-danger btn-xs" th:onclick="'cancelDishMark('+${item.id}+')'">
                                        取消收藏
                                    </button>
                                </p>

                                <p th:if="${!hasAddCart}" style="margin-top: 30px">
                                    <button class="btn btn-primary btn-xs" th:onclick="'saveAddCart('+${item.id}+')'">
                                        有点想吃
                                    </button>
                                </p>
                                <p th:if="${hasAddCart}" style="margin-top: 30px">
                                    <button class="btn btn-danger btn-xs" th:onclick="'cancelAddCart('+${item.id}+')'">
                                        删除想吃
                                    </button>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /container -->
        </div>
    </div>
    <!-- /reviews_summary -->

    <div class="container margin_60_35">
        <div class="row">
            <div class="col-lg-8">

                <div class="review_card" style="padding: 10px;" th:utext="${item.content}">

                </div>

                <div class="box_general write_review">
                    <h1>请给菜品进行评价</h1>
                    <div class="rating_submit">
                        <div class="form-group">
                            <label class="d-block">菜品总体评分</label>
                            <span class="rating">
                                    <input type="radio" id="star_1" class="rating-input" name="rating-input"
                                           value="5"><label data-value="5" for="star_1"
                                                            class="rating-star commentStar"></label>
                                    <input type="radio" id="star_2" class="rating-input" name="rating-input"
                                           value="4"><label data-value="4" for="star_2"
                                                            class="rating-star commentStar"></label>
                                    <input type="radio" id="star_3" class="rating-input" name="rating-input"
                                           value="3"><label data-value="3" for="star_3"
                                                            class="rating-star commentStar"></label>
                                    <input type="radio" id="star_4" class="rating-input" name="rating-input"
                                           value="2"><label data-value="2" for="star_4"
                                                            class="rating-star commentStar"></label>
                                    <input type="radio" id="star_5" class="rating-input" name="rating-input"
                                           value="1"><label data-value="1" for="star_5"
                                                            class="rating-star commentStar"></label>
                                </span>
                            <input type="hidden" id="score">
                        </div>
                    </div>
                    <div class="form-group">
                        <label>您的评价</label>
                        <textarea class="form-control" style="height: 180px;" id="commentContent"
                                  placeholder="请输入评价内容"></textarea>

                        <input type="hidden" id="dishId" th:value="${item.id}">
                    </div>
                    <div class="form-group">
                        <div class="checkboxes float-left add_bottom_15 add_top_15">
                            <label class="container_check">我承诺我的评价真实有效
                                <input type="checkbox" id="commentCheck">
                                <span class="checkmark"></span>
                            </label>
                        </div>
                    </div>
                    <div style="clear: both;"></div>
                    <div class="form-group">
                        <a href="javascript:void(0)" id="submitDishComment" class="btn_1">提交评价</a>
                    </div>
                </div>

                <div class="review_card" th:each="comment : ${dataList}">
                    <div class="row">
                        <div class="col-md-2 user_info">
                            <figure><a th:href="'/note/user/'+${comment.userId}"><img th:src="${comment.user.userAvatar}" alt=""></a></figure>
                            <h5 style="padding-left: 10px;font-weight: bold;color: #3578fa;">[[${comment.user.userDisplayName}]]</h5>
                        </div>
                        <div class="col-md-10 review_content">
                            <div class="clearfix add_bottom_15">
                                    <span class="rating">
                                        <i class="icon_star" th:if="${comment.score == 1}"
                                           th:each="i: ${#numbers.sequence(1, 1)}"></i>
                                        <i class="icon_star" th:if="${comment.score == 2}"
                                           th:each="i: ${#numbers.sequence(1, 2)}"></i>
                                        <i class="icon_star" th:if="${comment.score == 3}"
                                           th:each="i: ${#numbers.sequence(1, 3)}"></i>
                                        <i class="icon_star" th:if="${comment.score == 4}"
                                           th:each="i: ${#numbers.sequence(1, 4)}"></i>
                                        <i class="icon_star" th:if="${comment.score == 5}"
                                           th:each="i: ${#numbers.sequence(1, 5)}"></i>
                                        <i class="icon_star empty" th:if="${comment.score == 0}"
                                           th:each="i: ${#numbers.sequence(1, 5)}"></i>
                                        <i class="icon_star empty" th:if="${comment.score == 1}"
                                           th:each="i: ${#numbers.sequence(1, 4)}"></i>
                                        <i class="icon_star empty" th:if="${comment.score == 2}"
                                           th:each="i: ${#numbers.sequence(1, 3)}"></i>
                                        <i class="icon_star empty" th:if="${comment.score == 3}"
                                           th:each="i: ${#numbers.sequence(1, 2)}"></i>
                                        <i class="icon_star empty" th:if="${comment.score == 4}"
                                           th:each="i: ${#numbers.sequence(1, 1)}"></i>
                                        <em> [[${comment.scoreStr}]]</em>
                                   </span>
                                <em>[[${#dates.format(comment.createTime,'yyyy-MM-dd HH:mm')}]]</em>
                            </div>
                            <p th:utext="${comment.content}"></p>
                        </div>
                    </div>
                    <!-- /row -->
                    <div class="row reply" th:each="reply : ${comment.childCommentList}">
                        <div class="col-md-2 user_info" style="text-align: right;">
                            <figure><img th:src="${reply.user.userAvatar}" alt=""></figure>
                        </div>
                        <div class="col-md-10">
                            <div class="review_content">
                                <strong>[[${reply.user.userDisplayName}]] 回复</strong>
                                <em>[[${#dates.format(reply.createTime,'yyyy-MM-dd HH:mm')}]]</em>
                                <p>[[${reply.content}]]</p>
                            </div>
                        </div>
                    </div>
                    <!-- /reply -->
                </div>


                <!-- /review_card -->
                <div class="pagination__wrapper add_bottom_30">
                    <ul class="pagination" th:if="${pageInfo.total > 0}">
                        <li th:if="${pageInfo.current > 1}">
                            <a class="prev" tabindex="-1"
                               th:href="'?page='+${pageInfo.current-1}">
                                ❮
                            </a>
                        </li>
                        <li th:each="i: ${#numbers.sequence(1, pageInfo.pages)}" th:if="${pageInfo.pages > 1}">
                            <a th:classappend="${pageInfo.current == i ? 'active' : ''}"
                               th:href="'?page='+${i}">[[${i}]]</a>
                        </li>
                        <li th:if="${pageInfo.pages > pageInfo.current}">
                            <a class="next"
                               th:href="'?page='+${pageInfo.current+1}">
                                ❯
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- /pagination -->
            </div>
            <!-- /col -->
            <div class="col-lg-4">
                <div class="box_general company_info">
                    <h3>[[${store.name}]]</h3>
                    <p>
                        <img th:src="${store.photo}" style="width: 100%;" alt="">
                    </p>
                    <p><strong>档口地址</strong><br>[[${store.address}]]</p>
                    <p><strong>负责人联系人</strong><br>[[${store.businessName}]]</p>
                    <p><strong>负责人电话</strong><br>[[${store.businessPhone}]]</p>
                    <p>
                        <a th:href="'/store/'+${store.id}" class="btn btn-primary">档口主页</a>
                    </p>
                </div>
            </div>
        </div>
        <!-- /row -->
    </div>
    <!-- /container -->

</main>
<!--/main-->


<div th:replace="home/module/_footer"></div>
<script>
    tinymce.init({
        selector: '#commentContent',
        language: "zh_CN",
        height: 400,
        theme: "silver",
        browser_spellcheck: true, // 拼写检查
        branding: true, // 去水印
        // elementpath: false,  //禁用编辑器底部的状态栏
        statusbar: false, // 隐藏编辑器底部的状态栏
        paste_data_images: true, // 允许粘贴图像
        menubar: true, // 隐藏最上方menu
        fontsize_formats:
            "12px 13px 14px 15px 16px 17px 18px 20px 22px 24px 26px 30px 35px 40px 50px",
        plugins:
            "image",
        toolbar:
            "formatselect | bold italic strikethrough forecolor backcolor fontsizeselect | link image",
        paste_webkit_styles: true,
        paste_data_images: true,  //  设置为允许粘帖图片
        images_upload_url: '/admin/file/upload', //  图片上传地址
        contextmenu: `inserttable | cell row column deletetable`,
        relative_urls: false,
        remove_script_host: false
    });

    $(document).on('click', '#submitDishComment', function () {
        let score = $('#score').val();
        if (score == '' || score > 5 || score < 1) {
            alert('请给菜品打分');
            return;
        }
        // let content = $('#commentContent').val();
        let content = tinymce.activeEditor.getContent();
        if (content.length < 2) {
            alert('评价不少于2个字符');
            return;
        }
        let commentCheck = $('#commentCheck').prop('checked');
        if (commentCheck == false) {
            alert('请勾选承诺协议');
            return;
        }
        $.ajax({
            type: 'POST',
            url: '/dish/dishComment/save',
            async: false,
            data: {
                'dishId': $('#dishId').val(),
                'content': content,
                'score': score
            },
            success: function (data) {
                if (data.code == 1) {
                    window.location.href = '/commentSuccess';
                } else {
                    alert(data.msg);
                }
            }
        });
    });


</script>
